<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		useRoute,
		onBeforeRouteUpdate
	} from 'vue-router'

	const userRoutes = ref(['/users/eduardo/posts/1', '/users/john/posts/20'])

	const route = useRoute()

	watch(() => route.params.id, (newId, oldId) => {
		alert(`id=${oldId}`)

	})

	onBeforeRouteUpdate(async (to, from) => {

	})
</script>
<template>
	<h1>Hello App!</h1>
	<p>
		<strong>Current route path:</strong> {{ $route.fullPath }}
	</p>
	<nav>
		<RouterLink to="/">Go to Home</RouterLink>
		<RouterLink to="/about">Go to About</RouterLink>
		<ul>
			<li v-for="item in userRoutes">
				<router-link :to="item">{{item}}</router-link>
			</li>
		</ul>

	</nav>
	<main>
		<RouterView />
	</main>
</template>

<style>
	nav,
	main {
		border: 2px solid #000;
		margin-bottom: 10px;
		padding: 10px;
	}

	nav>a+a {
		margin-left: 10px;
	}

	h2 {
		border-bottom: 1px solid #ccc;
		margin: 0 0 20px;
	}

	ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	li:not(:last-of-type) {
		margin-right: 1rem;
	}

	.router-link-active {
		color: orange;
	}

	.router-link-exact-active {
		color: crimson;
	}
</style>